<template>
  <div class="back" style=" height: calc(100vh - 100px)">



    <div style="height: 50px;"></div>

    <el-table v-loading="loading" :data="tourimsList"      @selection-change="selectionChange" :row-key="getRowKeys"
    >
      <el-table-column type="selection" width="50" align="center"  />
      <el-table-column label="名称" align="center" prop="toursimInfo.name" show-overflow-tooltip/>
      <el-table-column label="图片" align="center" prop="toursimInfo.photo" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.toursimInfo.photo">暂无图像</div>
          <div v-else>
            <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.toursimInfo.photo.split(',')[0]"
                :preview-src-list="scope.row.toursimInfo.photo.split(',')">
            </el-image>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" prop="toursimInfo.content" width="180" show-overflow-tooltip/>
      <el-table-column label="价格" align="center" prop="toursimInfo.price"/>
      <el-table-column label="库存" align="center" prop="toursimInfo.number"/>
      <el-table-column label="数量" align="center" prop="number">
        <template slot-scope="scope">
          <el-input-number v-model="number" @change="handleChange" :min="1" :max="scope.row.toursimInfo.number*1" ></el-input-number>
        </template>
      </el-table-column>


    </el-table>
    <div style="text-align: right;margin:30px 100px 30px 0;">
      <span style="color: red;font-size: 20px;background-color: #f3f3f3;padding: 10px 20px;border-radius: 20px"> 总价： {{totalprice}}</span>

    </div>
    <div style="text-align: right;margin:30px 100px 30px 0;">
      <el-button type="danger"   @click="buy">确认购买</el-button>
    </div>




    <el-dialog :title="'商品支付：￥'+totalprice" :visible.sync="open" width="38%" append-to-body>
      <el-form ref="payform" :model="payform"  label-width="180px">
        <el-form-item >
          <el-radio-group v-model="payform.paymentMethod">
            <el-radio label="微信">微信</el-radio>
            <el-radio label="支付宝">支付宝</el-radio>
            <el-radio label="信用卡">信用卡</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div style="display: flex;justify-content: center;text-align: center;">
        <div>
          <div style="font-size: 20px;margin-bottom: 20px">
            <div v-if="payform.paymentMethod=='微信'">
              请使用微信扫码支付
            </div>
            <div v-if="payform.paymentMethod=='支付宝'">
              请使用支付宝扫码支付
            </div>
            <div v-if="payform.paymentMethod=='信用卡'">
              请使用信用卡app扫码支付
            </div>
          </div>

          <el-image
              style=" height: 300px"
              :src="paypng"
              :preview-src-list="[paypng]">
          </el-image>
        </div>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open =false">取 消</el-button>
      </div>
    </el-dialog>



  </div>



</template>

<script>
import {listOrders, getOrders, delOrders, addOrders, updateOrders} from "@/api/project/orders";
import { getTourism, updateTourism} from "@/api/project/tourism";
import paypng from "../../assets/pay.png"
export default {
  name: "index",
  data() {
    return {
      number:1,
      paypng:paypng,
      payform:{
        paymentMethod:"微信"
      },
      myinfo:{},
      userlist:[{id:1}],
      tourimsList:[],
      loading:false,
      total:0,
      totalprice:0,
      selectdata:[],
      open:false,
      open2:false,
    }
  },

  created() {
    console.log("this.$route.query.info",JSON.parse(this.$route.query.info) )

    this.getList();
  },
  methods: {

    buy(){
      if(this.selectdata.length>0){

        this.open=true
      }else {
        this.$message.error("请选择所需结算商品信息");
      }
    },
    submitForm(){
      let selectdata=this.selectdata
      selectdata[0].toursimInfo.number=this.number

      // selectdata.number=this.number;
      console.log(selectdata[0])


      console.log(selectdata)
      let data={
        userId:JSON.parse(localStorage.getItem("userInfo")).id,
        ordersGoods:JSON.stringify(selectdata),
        ordersStatus:"已购票",
        orderType:"门票",
        orderId:"order_"+new Date().getTime()
      }

      addOrders(data).then(res => {
        const promises = this.selectdata.map(item => {

          return getTourism(item.toursimInfo).then(res2 => {
            res2.data.number = res2.data.number * 1 - this.number * 1;
            return updateTourism(res2.data);
          });
        });

        Promise.all(promises).then(() => {
          this.$message.success("购买成功！");
          this.open = false;

          this.$router.push({ path: '/ticket'});
        }).catch(error => {
          console.error('Error:', error);
        });
      });


    },
    handleUpdate(){

      this.myinfo = this.userlist[0];
      this.open2 = true;
    },
    submitForm2(){

      if(this.selectdata.length>0){

        this.open=true
      }else {
        this.$message.error("请选择所需结算商品信息");
      }
    },
    sumprice(row){
      let totalprice=0
      row.forEach(res=>{
        totalprice +=this.number*res.toursimInfo.price
      })
      this.totalprice =totalprice
    },
    selectionChange(selection) {
      this.selectdata=selection
      this.sumprice(selection)


    },
    getRowKeys(row) {
      return row.id;
    },
    handleChange(value) {
      this.sumprice(this.selectdata)
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.tourimsList = [{toursimInfo:JSON.parse(this.$route.query.info)} ]
      this.loading = false;
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除？').then(function () {
        return delCart(row);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {
      });
    },
  }
}
</script>

<style scoped>
.back{
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

</style>
